<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery-3.4.1.min.js"></script>
    <!--    页面中引入外网的链接资源，会产生一个新的http请求。为了安全（URL里可能包含用户信息），浏览器一般都会给这写请求头加上表示来源的referrer 字段。-->
    <!--    所以，此时我们需要隐藏外部链接中的referrer，在head标签中加入meta， -->
    <meta name="referrer" content="no-referrer"/>
</head>
<body>
<img class="song-albumImg" th:src="${song.albumImg}"/>

<h1 class="song-name" th:text="${song.name}"></h1>

<a href="#" th:data-id="${song.id}" class="player-btn">播放</a>
<!--<audio> 标签定义声音，比如音乐或其他音频流。-->
<audio id="player" style="display: none;" src="" controls="controls"></audio>

<h3>
    <label>歌手:</label><span class="song-singer" th:text="${song.singer}"></span>
</h3>
<h3>
    <label>所属专辑:</label><span class="song-albumName" th:text="${song.albumName}"></span>
</h3>
<h3>
    <label>评论数:</label><span class="song-commentCount" th:text="${song.commentCount}"></span>
</h3>
<div class="song-lyrics" th:utext="${song.lyrics}">
</div>
<ul>
    <li>
        <a href="#" class="change-song" data-id="483937795">撒野</a>
<!--        <a href="#" class="player-btn" data-id="483937795">播放</a>-->
    </li>
</ul>
<div >
    <iframe id="frame-content" scrolling="auto"  src="http://localhost:8080/comments" frameborder="0"></iframe>
</div>
<script>
    // iframe自适应会用到
    getIframeHeight=function (doc) {
        // clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（经过实践取出来的大多是视口大小）
        // scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）
        // offsetHeight: 偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距
        var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
        var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
        // 返回给定的一组数字中的最大值。如果给定的参数中至少有一个参数无法被转换成数字，则会返
        var height = Math.max(cHeight, sHeight)
        return height
    }

    var ifr = document.getElementById('frame-content')
    ifr.onload = function () {
        /*
         * 用iframe嵌套页面时，如果父页面要获取子页面里面的内容，可以使用contentWindow或者contentDocument，其区别如下：
         * 1、contentWindow  这是个只读属性，返回指定的iframe的窗口对象。它虽然不是标准的一部分，但各个主流浏览器都支持。
　　      * 2、contentDocument  Firefox 支持，IE6，IE7都不支持，IE8开始支持,需要如此访问 document.frames['J_mainframe'].document。
　　      * 兼容获取document对象：
         * */
        var iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow
        var height = getIframeHeight(iDoc);
        ifr.style.height = height + 'px'
    }
    //当页面加载完成时执行一段代码
    $(function () {
        //监听onclick事件
        $('.player-btn').on('click', function (e) {
            e.preventDefault();
            var songId = $(this).data('id');
            $.ajax({
                //传入url
                url: '/song/music',
                method: 'GET',
                data: {
                    songId: songId
                },
                //不要缓存
                cache: false
            })
                .done(function (data) {
                    //查找id用#，class用.
                    $('#player').show();
                    //data是getmusicsrc返回的值document.getElementById('player').
                    $('#player').attr('src', data);
                    document.getElementById('player').play();
                });
        });
        //切换歌曲函数
        $(".change-song").on('click', function (e) {
            e.preventDefault();
            //获取当前歌曲的songId,
            var songId = $(this).data("id");
            $.ajax({
                //跳转到/songInfo/get对应的方法
                url: "/songInfo/get",
                method: "POST",
                data: {
                    songId: songId
                },
                cache: false
            })
            //执行/songInfo/get下的get方法获取当前歌曲data对象
                .done(function (data) {
                    //当点击切换时获取当前对象的song-name，替换相似歌曲名称
                    $('.change-song').html($('.song-name').text());
                    //替换专辑图片
                    $('.song-albumImg').attr('src', data.albumImg);
                    //替换专辑名称
                    $('.song-albumName').html(data.albumName);
                    //替换点赞数
                    $('.song-commentCount').html(data.commentCount);
                    //替换歌词
                    $('.song-lyrics').html(data.lyrics);
                    //替换歌名
                    $('.song-name').html(data.name);
                    //暂停歌曲播放
                    document.getElementById('player').pause();
                    //隐藏歌曲播放器
                    $('#player').attr('style', "display:none;");
                    //获取当前的歌曲的data-id
                    var currsongId = $('.player-btn').data('id');
                    //替换change-song标签中的data-id
                    $('.change-song').data("id", currsongId);
                    //替换player-btn标签中的data-id
                    $('.player-btn').data("id", songId);
                    //替换歌手
                    $('.song-singer').html(data.singer);
                });
        });
        $(".like-btn").on('click',function(e){
            e.preventDefault();
            var self=$(this);
            var commentId=self.data('id');
            $.ajax({
                url:"/comment/like",
                method:"POST",
                data:{
                    songId:"557581476",
                    commentId:commentId
                },
                //不要缓存
                cache:false
            })
                .done(function (data) {
                    self.html(data.likeNum);
                });
        });
    });
</script>
</body>
</html>
<!--
$.ajax({

           type: "POST",//type是ajax的方法
           url : "<%=path%>/resource/usermenus",//参数url,要把参数传到什么地方

           data : {parentid:parentid,parentpath:parentpath},//传递什么数据

           success : function(data){//sucess表示，当数据返回成功后要怎么做，返回的数据存储在data
 -->